<template>
	<el-dialog :title="title" center v-model="dialogTableVisible" append-to-body width="800px">
		<div>
			<el-form class="pt20" style="padding-bottom: 0;" label-width="80px" :model="form" ref="formRef"
				:rules="rules"
				:inline="true">
				<el-form-item label="选择成员" prop="selectUserIds" v-if="form.performanceType == 2">
					<el-select v-model="form.selectUserIds" placeholder="请选择" multiple size="large" style="width: 280px">
						<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
							:value="dict.userId" />
					</el-select>
				</el-form-item>
				<el-form-item label="选择部门" prop="selectUserIds" v-else-if="form.performanceType == 1">
					<el-tree-select size="large" v-model="form.selectUserIds" :data="deptOptions"
					:multiple="true"
					 :props="{
					   value: 'deptId',
					   label: 'deptName',
					   children: 'children',
					}"  placeholder="请选择" 
					value-key="deptId"
					show-checkbox
					 style="width: 280px;"
					 />
				</el-form-item>
				<el-form-item label="目标财年" prop="financialYear" :style="{'margin-right':form.performanceType != 0 ? '0' : '32px'}">
					<el-date-picker style="width: 280px" :editable="false" :clearable="false" size="large"
						v-model="form.financialYear" value-format="YYYY" type="year" placeholder="选择年">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="目标类型" prop="targetType" :style="{'margin-right':form.performanceType != 0 ? '32px' : '0'}">
					<el-select v-model="form.targetType" placeholder="请选择" size="large" :style="{'width': form.performanceType != 0 ? '150px' : '280px'}">
						<el-option v-for="dict in bs_performance_targettype" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="年度目标" prop="annualTarget" :style="{'margin-right':form.performanceType != 0 ? '0' : '32px'}">
					<el-input v-model="form.annualTarget" placeholder="请输入" class="resetInput"  :style="{'width': form.performanceType != 0 ? '150px' : '280px'}" />
				</el-form-item>
				<el-form-item label="目标单位" prop="targetUnit"  :style="{'margin-right':form.performanceType != 0 ? '32px' : '0'}">
					<el-select v-model="form.targetUnit" placeholder="请选择" size="large"  :style="{'width': form.performanceType != 0 ? '150px' : '280px'}">
						<el-option v-for="dict in bs_performance_targetunit" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<div class="fb mt10 mb10">
					目标分解
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-row class="border-bottom border-right border-left border-top">
							<el-col :span="12" class="border-right text-center bg-F5F7FA fb pt10 pb10">第一季度</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.quarterOne" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-01</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.january" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-02</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.february" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-03</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.march" class="el-input1" />
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="6">
						<el-row class="border-bottom border-right border-left border-top">
							<el-col :span="12" class="border-right text-center bg-F5F7FA fb pt10 pb10">第二季度</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.quarterTwo" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-04</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.april" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-05</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.may" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-06</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.june" class="el-input1" />
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="6">
						<el-row class="border-bottom border-right border-left border-top">
							<el-col :span="12" class="border-right text-center bg-F5F7FA fb pt10 pb10">第三季度</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.quarterThree" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-07</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.july" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-08</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.august" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-09</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.september" class="el-input1" />
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="6">
						<el-row class="border-bottom border-right border-left border-top">
							<el-col :span="12" class="border-right text-center bg-F5F7FA fb pt10 pb10">第四季度</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.quarterFour" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-10</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.october" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-11</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.november" class="el-input1" />
							</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="12"
								class="border-right text-center bg-F5F7FA fb pt10 pb10">{{form.financialYear}}-12</el-col>
							<el-col :span="12" class="color2 text-center">
								<el-input v-model="form.december" class="el-input1" />
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer text-right mt30">
			<el-button class="cancelSubBtn" @click="close()">取 消</el-button>
			<el-button type="primary" @click="targetSubmit('formRef')" class="mainSubBtn">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		addTarget, //添加目标
		editTarget,//修改
		editBatchTarget,//批量编辑
	} from "@/api/business/performance";
	import {
		getUserListData//查业务经理
	} from "@/api/business/teamOpportunity";
	import {
	   listDept,//査部门
	} from "@/api/system/dept";
	export default {
		props:{
			ids:{
				type:Array,
				default:res=>{[]}
			},
			detail:{
				type:Object,
				default:res=>{{}}
			},
			selectUserIds:{
				type:Array,
				default:res=>{[]}
			},
			performanceType:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				dialogTableVisible: false,
				form: {
					id:'',
					performanceType: this.performanceType,
					selectUserIds: [],
					financialYear: new Date().getFullYear().toString(),
					targetType: "",
					annualTarget: "",
					targetUnit: "",
					quarterOne: "",
					quarterTwo: "",
					quarterThree: "",
					quarterFour: "",
					january: "",
					february: "",
					march: "",
					april: "",
					may: "",
					june: "",
					july: "",
					august: "",
					september: "",
					october: "",
					november: "",
					december: "",
					remark: ""
				},
				bs_performance_targettype: this.useDict('bs_performance_targettype').bs_performance_targettype,
				bs_performance_targetunit: this.useDict('bs_performance_targetunit').bs_performance_targetunit,
				teamOptions: [],
				rules:{
					selectUserIds: [
						{required: true,message: '请选择成员',trigger: 'change'}, 
					],
					financialYear:[
						{required: true,message: '请选择',trigger: 'blur'},
					],
					targetType:[
						{required: true,message: '请选择',trigger: 'change'},
					],
					annualTarget:[
						{required: true,message: '请选择',trigger: 'blur'},
					],
					targetUnit:[
						{required: true,message: '请选择',trigger: 'change'},
					],
				},
				type:0 ,//0新增 1编辑
				title:'设置业绩目标'
			}
		},
		watch:{
			detail(val1,val2){
				if(val1 != ''){
					this.form = val1
					if(this.form.performanceType == 0){
						this.form.selectUserIds = null
					}else if(this.performanceType == 1){
						this.form.selectUserIds =  [this.form.department]
					}else if(this.performanceType == 2){
						this.form.selectUserIds =  [this.form.relatedId]
					}
				}
			},			
		},
		created() {
			//个人
			if(this.form.performanceType == 2){
				this.getUserList()
			}else if(this.form.performanceType == 1){
				//部门
				this.getWorkList()
			}
			
		},
		methods: {
			open(num) {
				this.type = num //0新增 1编辑
				if(this.type == 0){
					this.title = '添加业绩目标'
					this.reset()
				}else if(this.type == 1){
					this.title = '编辑业绩目标'					
				}else{
					this.title = '批量编辑业绩目标'
					this.reset()
				}
				setTimeout(()=>{
					if(this.selectUserIds.length  > 0){
						// 批量编辑传参
						this.form.selectUserIds = this.selectUserIds
					}
				},200)
				
				this.dialogTableVisible = true
			},
			reset(){
				this.form = {
					id:'',
					performanceType: this.performanceType,
					selectUserIds: [],
					financialYear: new Date().getFullYear().toString(),
					targetType: "",
					annualTarget: "",
					targetUnit: "",
					quarterOne: "",
					quarterTwo: "",
					quarterThree: "",
					quarterFour: "",
					january: "",
					february: "",
					march: "",
					april: "",
					may: "",
					june: "",
					july: "",
					august: "",
					september: "",
					october: "",
					november: "",
					december: "",
					remark: ""
				}
				console.log(this.form,'lkp')
				this.$forceUpdate()
			},
			close() {
				this.dialogTableVisible = false
			},
			// 获取业务经理
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
				});
			},
			// 获取部门
			getWorkList() {
				listDept().then((response) => {
				   this.deptOptions = this.handleTree(response.data, "deptId");
				});
			},
			//添加目标
			targetSubmit(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.type == 0){
							//新增
							if(this.form.performanceType == '0'){
								this.form.selectUserIds = null
							}
							addTarget(this.form).then(res=>{
								if(res.code == 200){
									this.dialogTableVisible = false
									this.$emit('getList')
								}
							})
						}else{
							//编辑
							if(this.selectUserIds.length  == 0){
								//单条编辑
								editTarget(this.form).then(res=>{
									if(res.code == 200){
										this.dialogTableVisible = false
										this.$emit('getList')
									}
								})
							}else{
								this.form.ids = this.ids
								// delete this.form.selectUserIds;
								editBatchTarget(this.form).then(res=>{
									if(res.code == 200){
										this.dialogTableVisible = false
										this.$emit('getList')
									}
								})
							}
							
						}
					}
				})	
			}
		}
	}
</script>

<style>
	.el-input1 {
		width: 60px;
		height: 30px;
		margin-top: 3px;
	}
</style>